<template>
	<view class="container">
		<view class="page-body-tab pad20">
			<view class="c-0 font36 bold">
				ORDERAFRICARGO
			</view>
			<view class="padv20">
				<u-search disabled :show-action="false" searchIconColor="#080808"
					@click="$go2('/pages/main/goods/search')" placeholder="Search For Products" />
			</view>
			<scroll-view @scrolltolower="reachBottom()" scroll-y="true"
				style="height: calc(100% - 100rpx); padding: 10rpx 0" :show-scrollbar="false">
				<u-swiper mode="none" class="u-skeleton-rect" v-if="banners && banners.length" height="360" effect3d
					border-radius='10' img-mode="scaleToFill" :list="banners" @click="handleClickSwiper">
				</u-swiper>
				<u-gap />
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item, index) in categoryList" :key="item.id"
						class="grid-item relative flex a-c" @click="$go2(`/pages/main/goods/list?cata_id=${item.id}`)">
						<sb-img w="160" shadow mode='center' :src="item.cover" />
						<view class="c-w absolute bold">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
				<u-gap />
				<view class="bg-white pad20">
					<sb-tip :showRight="false">RECOMMENDED</sb-tip>
					<scroll-view scroll-x class="rocommend-content">
						<view class="flex flex-nowrap">
							<navigator class="marv20 marh10" style="width:250rpx"
								:url="`/pages/main/goods/detail?id=${item.goodsId}`"
								v-for="(item, index) in recommendList" :key="index">
								<sb-img w='250' :src='item.cover' shadow />
								<view class="j-c flex-col flex">
									<view class="padv10 u-line-3">{{item.name}}</view>
									<sb-price-text :price='item.price' />
								</view>
							</navigator>
						</view>
					</scroll-view>
				</view>
				<u-gap h="20" />
				<view class="bg-white pad20">
					<sb-tip url="/pages/main/goods/list">YOU May LIKE</sb-tip>
				</view>
				<view class="padh20">
					<u-waterfall v-model="goodsList" ref="uWaterfall" class="marv15 radius10">
						<template v-slot:left="{ leftList }">
							<view v-for="(item, index) in leftList" :key="index">
								<goods-card :goods="item" />
							</view>
						</template>
						<template v-slot:right="{ rightList }">
							<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
								<goods-card :goods="item" />
							</view>
						</template>
					</u-waterfall>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import { RECOMMEND_TYPE } from "@/config/enum.js";
	import { mapGetters, mapState } from "vuex";
	export default {
		data() {
			return {
				banners: [],
				goodsList: [],
				swiperList: [],
				pageIndex: 1,
				recommendList: [],
				categoryList: [],
			};
		},
		onLoad() {
			this.getBanner();
			this.getCategoryList();
			this.getRecommendList();
			this.getGoodsList();
		},
		methods: {
			async getCategoryList() {
				let { success, data } = await this.$get("/goodsCategory/getCategoryByPid", { pid: 0 });
				if (success && data) this.categoryList = data.rows.splice(0, 4);
			},
			async getBanner() {
				let { data: { rows }, } = await this.$get("/banner/list", {
					pageSize: 10,
					pageIndex: 1,
				}, false);
				this.banners = rows.map((r) => r.cover);
				this.swiperList = rows;
			},
			async getGoodsList() {
				let { success, data } = await this.$get("/goods/hotList", {
					pageIndex: this.pageIndex,
					pageSize: 20,
				}, false);
				if (success) {
					let { rows } = data
					if (this.pageIndex === 1) this.dataList = []
					if (rows.length) this.goodsList = this.goodsList.concat(rows)
				}
			},
			async getRecommendList() {
				let {
					success,
					data: { rows },
				} = await this.$get("/recommend/list", {
					pageIndex: 1,
					pageSize: 10,
					type: RECOMMEND_TYPE.HOMEPAGE,
				}, false);
				success && (this.recommendList = rows)
			},
			handleClickSwiper(index) {
				let { goodsId } = this.swiperList[index]
				this.$go2(this.$makeUrl('/pages/main/goods/detail', {
					id: goodsId
				}));
			},
			reachBottom() {
				this.pageIndex++;
				this.getGoodsList();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		/deep/ {
			.u-tabbar__content {
				position: absolute;
			}
		}
	}

	.grid-item {
		height: 200rpx;
	}
</style>
